0
311
Views¿Por qué "screen.height" funciona bien cuando se usa DevTool de Chrome para simular dispositivos móviles, pero no en dispositivos móviles reales?
La screen.height de pantalla de la que hablo se describe en https://www.w3schools.com/jsref/prop_screen_height.asp
screen.height < 560 ? true : false para determinar si la altura de la pantalla es menor que un umbral, por lo que puedo ocultar algunos elementos de la interfaz de usuario en este caso.
Funciona bien en el simulador de Chrome para dispositivos móviles (la función destacada a continuación). 
Por "funciona bien", me refiero a que al simular un dispositivo móvil, como configurar el dispositivo para que sea iPhone X como se muestra arriba y mostrarlo en modo horizontal, los elementos de la interfaz de usuario se ocultan correctamente debido a screen.height < 560 = true .
Sin embargo, en dispositivos móviles reales como un iPhone X real, los elementos de la interfaz de usuario no se ocultan, lo que supongo que se debe a que siempre es screen.height < 560 = false , incluso si está en modo horizontal.
Me pregunto por qué... ¿Por qué el iPhone X en DevTool tiene una altura diferente a la de un iPhone X real?
¿La simulación en Chrome DevTool no es precisa? ¿O es porque screen.height no devuelve el valor correcto en el dispositivo móvil?
¡Cualquier sugerencia sería apreciada!
2 answers
Answer question0
Puede ser porque te falta la meta de respuesta. Intenta agregar esto a tu etiqueta head :
<meta name="viewport" content="width=device-width, initial-scale=1">0
Eso es porque el simulador toma el tamaño de la pantalla de acuerdo a las dimensiones que estás configurando allí. Pero en realidad, screen.height toma el tamaño de altura de toda la pantalla, incluidos los elementos que están fuera de la ventana gráfica del dispositivo. Debe usar window.innerHeight para obtener un tamaño de altura preciso.
Si inicia sesión en su consola screen.height y window.innerHeight en el simulador, obtendrá el mismo tamaño. Si hace esto en la vista normal (desactivando el simulador), obtendrá diferentes valores.
Más información: Altura de la pantalla - Altura interior de la ventana
ACTUALIZAR
screen.height no se actualiza con la rotación de la pantalla, siempre tiene el mismo valor correspondiente a la altura de la pantalla en modo vertical, mientras que window.innerHeight toma la altura actual de la ventana del dispositivo, ya sea vertical u horizontal. Solo asegúrese de disparar esto en caso de que ocurra la rotación.
Para esto, podría usar Window.matchMedia() así:
// Breakpoints const breakpoint = window.matchMedia('(max-height: 560px)'); // Breakpoint checker const breakpointMutations = () => { if (breakpoint.matches === true) { // Do something } } // Run breakpoint checker if media changes breakpoint.onchange = function (event) { breakpointMutations(); } // Run breakpoint checker on load breakpointMutations();